<template>
  <div class="m-3">
    <VxeBasicTable
      ref="tableRef"
      v-bind="gridOptions"
      @checkbox-change="checkboxChange"
      @checkbox-all="checkboxChange"
    >
      <template #action="{ row }">
        <TableAction
          :outside="true"
          :actions="[
            {
              label: '编辑',
              onClick: handleEdit.bind(null, row),
              auth: auth.edit,
            },
          ]"
          :dropDownActions="[
            {
              label: '详情',
              onClick: handleDetail.bind(null, row),
            },
            {
              label: '删除',
              color: 'error',
              popConfirm: {
                title: '是否确认删除',
                placement: 'left',
                confirm: handleDelete.bind(null, row),
              },
              auth: auth.delete,
            },
          ]"
        />
      </template>
    </VxeBasicTable>
    <WareHouseModal width="900px" @register="registerModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
  import { TableAction, VxeBasicTable } from '@mxpio/components';
  import { deleteWh, whPage, whConfig } from '@mxpio/bizcommon';
  import { useListCrud } from '@mxpio/common';
  import { columns, searchFormSchema } from './wareHouse.data';
  import WareHouseModal from './WareHouseModal.vue';

  const componentName = 'WareHouseList';
  defineOptions({ name: componentName });
  const {
    tableRef,
    auth,
    gridOptions,
    registerModal,
    handleEdit,
    handleDelete,
    handleDetail,
    handleSuccess,
    checkboxChange,
  } = useListCrud({
    componentName,
    columns,
    searchFormSchema,
    pageApi: whPage,
    deleteApi: deleteWh,
    configApi: whConfig,
    rowConfig: {
      keyField: 'whCode',
    },
    module: 'erp',
  });
</script>
